<!DOCTYPE html>
<html>
<head>
<title>Interference of Two Plane Waves</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  /**
   * Draws a line with an arrowhead at the end.
   * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
   * @param {number} x1 - The x-coordinate of the starting point.
   * @param {number} y1 - The y-coordinate of the starting point.
   * @param {number} x2 - The x-coordinate of the ending point.
   * @param {number} y2 - The y-coordinate of the ending point.
   * @param {number} [headlen=10] - The length of the arrowhead sides.
   */
  function drawArrow(ctx, x1, y1, x2, y2, headlen = 10) {
    const angle = Math.atan2(y2 - y1, x2 - x1);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }

  /**
   * Draws a text label with a vector arrow on top and a subscript.
   * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
   * @param {string} text - The main text of the label (e.g., 'E').
   * @param {string} sub - The subscript text (e.g., '1').
   * @param {number} x - The x-coordinate for the label.
   * @param {number} y - The y-coordinate for the label.
   */
  function drawVectorLabel(ctx, text, sub, x, y) {
    ctx.font = 'italic bold 24px Times New Roman';
    ctx.fillStyle = 'black';
    const textMetrics = ctx.measureText(text);
    const textWidth = textMetrics.width;

    ctx.fillText(text, x, y);

    // Draw vector arrow
    const arrowY = y - 22;
    const arrowX_end = x + textWidth;
    ctx.beginPath();
    ctx.moveTo(x, arrowY);
    ctx.lineTo(arrowX_end, arrowY);
    ctx.moveTo(arrowX_end, arrowY);
    ctx.lineTo(arrowX_end - 6, arrowY - 4);
    ctx.moveTo(arrowX_end, arrowY);
    ctx.lineTo(arrowX_end - 6, arrowY + 4);
    ctx.stroke();

    // Draw subscript
    ctx.font = '18px Times New Roman';
    ctx.fillText(sub, x + textWidth + 2, y + 5);
  }

  // --- Main Drawing ---

  // Clear canvas
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Set default styles for lines
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1.5;

  // 1. Draw the light waves (rays)
  // Wave E1 (horizontal)
  const y1_top = 150;
  const y1_bottom = 200;
  const x_start = 40;
  const x_end = 560;
  drawArrow(ctx, x_start, y1_top, x_end, y1_top);
  drawArrow(ctx, x_start, y1_bottom, x_end, y1_bottom);

  // Wave E2 (angled at 45 degrees)
  // The lines have a slope of -1 in canvas coordinates for a 45-degree upward angle.
  // Upper ray: y = -x + c1
  const upperE2_x1 = 120, upperE2_y1 = 330;
  const upperE2_x2 = 470, upperE2_y2 = -20; // y = -x + 450
  drawArrow(ctx, upperE2_x1, upperE2_y1, 500, -50);


  // Lower ray: y = -x + c2
  const lowerE2_x1 = 170, lowerE2_y1 = 330;
  const lowerE2_x2 = 520, lowerE2_y2 = -20; // y = -x + 500
  drawArrow(ctx, lowerE2_x1, lowerE2_y1, 550, -50);

  // 2. Draw the photosensitive plate P
  const plate_x = 350;
  const plate_w = 15;
  const plate_y = 100;
  const plate_h = 250;
  ctx.fillStyle = '#E0E0E0';
  ctx.fillRect(plate_x, plate_y, plate_w, plate_h);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1;
  ctx.strokeRect(plate_x, plate_y, plate_w, plate_h);
  ctx.lineWidth = 1.5; // Reset line width

  // 3. Draw the labels
  // Label P
  ctx.font = 'bold 24px Times New Roman';
  ctx.fillStyle = 'black';
  ctx.fillText('P', plate_x + 3, plate_y - 8);

  // Label E1
  drawVectorLabel(ctx, 'E', '1', 80, 185);

  // Label E2
  drawVectorLabel(ctx, 'E', '2', 150, 360);

  // 4. Draw angle theta
  // Vertex on the lower E2 line
  const angle_vx = 200;
  const angle_vy = -angle_vx + 500; // y = 300
  const angle_radius = 40;
  const angle_horiz_len = 50;

  // Horizontal line for angle reference
  ctx.beginPath();
  ctx.moveTo(angle_vx, angle_vy);
  ctx.lineTo(angle_vx + angle_horiz_len, angle_vy);
  ctx.stroke();

  // Arc for the angle
  ctx.beginPath();
  ctx.arc(angle_vx, angle_vy, angle_radius, -Math.PI / 4, 0); // Arc from -45 deg to 0 deg
  ctx.stroke();

  // Label theta (θ)
  ctx.font = 'italic 22px Times New Roman';
  ctx.fillText('θ', angle_vx + angle_radius/1.8, angle_vy - 8);

</script>
</body>
</html>